<template>
  <div class="herd">
      <div>
        <div class="left" @click="fun()">&lt;</div>
      <h2>试用中心</h2>
      <img src="../../../../public/qiaoxiaodong/hd1.png" alt="">
      </div>
      <div class="erji">
      <div>
          <router-link to="/eja">
            <span>全部</span>
            <p>好试精选</p>
          </router-link>
      </div>
      <div>
          <router-link to="/ejb">
            <span>美甲</span>
            <p>手先变美</p>
          </router-link>
          
      </div>
      <div>
          <router-link to="/ejc">
            <span>美睫</span>
            <p>美眸推荐</p>
          </router-link>
      </div>
      <div>
          <router-link to="/ejd">
            <span>美容</span>
            <p>换季舒缓</p>
          </router-link>
          
      </div>
      <div >
          <router-link to="/eje">
            <span>理疗</span>
            <p>健康好试</p>
          </router-link>
      </div>
      <router-view></router-view>
  </div>
  </div>
</template>

<script>
export default {
    methods:{
      fun() {
        this.$router.go(-1)
    }
    }
}
</script>

<style scoped>
  .herd {
    width: 100%;
    height: 1.85rem;
    background: #e96667;
    display: flex;
    position: relative;
  }
  .left {
    /* flex: 1; */
    width: 0.5rem;
    height: 0.5rem;
    font-size: 0.5rem;
    margin-left: 0.2rem;
    margin-top: 0.2rem;
  }
  h2 {
    /* flex: 2; */
    font-size: 0.6rem;
    color: #fff;
    position: absolute;
    left: 2.5rem;
    top: 0;
  }
  img {
    /* flex: 1; */
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    left: 6.8rem;
    top: 0.1rem;
    margin-top: 0.2rem;
  }
  .erji {
        width: 100%;
        height: 1.45rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 2rem;
    }
    .router-link-active span{
      color: red;
    }
    .erji div {
      margin-left: -0.4rem;
    }
    .erji span {
        margin-left: 0.2rem;
        font-size: 0.3rem;
        font-weight: 700;
        color: #333333;
    }
    .erji p {
        font-size: 0.3rem;
        color: #999999;
    }
</style>